Form controls · Bootstrap v5 中文文档 v5.3

2023-11-07 17:32| 来源: 网络整理| 查看: 265

View on GitHub Form controls

Give textual form controls like s and s an upgrade with custom styles, sizing, focus states, and more.

On this page Example

Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method.

html Email address Example textarea Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

html Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

html Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. readonly inputs can still be focused and selected, while disabled inputs cannot.

html Readonly plain text

If you want to have elements in your form styled as plain text, replace .form-control with .form-control-plaintext to remove the default form field styling and preserve the correct margin and padding.

html Email Password html Email Password Confirm identity File input html Default file input example Multiple files input example Disabled file input example Small file input example Large file input example Color

Set the type="color" and add .form-control-color to the . We use the modifier class to set fixed heights and override some inconsistencies between browsers.

html Color picker Datalists

Datalists allow you to create a group of s that can be accessed (and autocompleted) from within an . These are similar to elements, but come with more menu styling limitations and differences. While most browsers and operating systems include some support for elements, their styling is inconsistent at best.

Learn more about support for datalist elements.

html Datalist example CSS Variables

Form controls make use of a small amount of CSS variables to support custom styling across color modes.

--#{$prefix}form-control-bg: var(--#{$prefix}body-bg); --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg); Sass variables

$input-* are shared across most of our form controls (and not buttons).

$input-padding-y: $input-btn-padding-y; $input-padding-x: $input-btn-padding-x; $input-font-family: $input-btn-font-family; $input-font-size: $input-btn-font-size; $input-font-weight: $font-weight-base; $input-line-height: $input-btn-line-height; $input-padding-y-sm: $input-btn-padding-y-sm; $input-padding-x-sm: $input-btn-padding-x-sm; $input-font-size-sm: $input-btn-font-size-sm; $input-padding-y-lg: $input-btn-padding-y-lg; $input-padding-x-lg: $input-btn-padding-x-lg; $input-font-size-lg: $input-btn-font-size-lg; $input-bg: var(--#{$prefix}form-control-bg); $input-disabled-color: null; $input-disabled-bg: var(--#{$prefix}form-control-disabled-bg); $input-disabled-border-color: null; $input-color: var(--#{$prefix}body-color); $input-border-color: var(--#{$prefix}border-color); //$gray-400 $input-border-width: $input-btn-border-width; $input-box-shadow: $box-shadow-inset; $input-border-radius: $border-radius; $input-border-radius-sm: $border-radius-sm; $input-border-radius-lg: $border-radius-lg; $input-focus-bg: $input-bg; $input-focus-border-color: tint-color($component-active-bg, 50%); $input-focus-color: $input-color; $input-focus-width: $input-btn-focus-width; $input-focus-box-shadow: $input-btn-focus-box-shadow; $input-placeholder-color: var(--#{$prefix}secondary-color); $input-plaintext-color: var(--#{$prefix}body-color); $input-height-border: calc($input-border-width * 2); // stylelint-disable-line function-disallowed-list $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2); $input-height-inner-half: add($input-line-height * .5em, $input-padding-y); $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5); $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)); $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)); $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)); $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; $form-color-width: 3rem;

$form-label-* and $form-text-* are for our s and .form-text component.

$form-label-margin-bottom: .5rem; $form-label-font-size: null; $form-label-font-style: null; $form-label-font-weight: null; $form-label-color: null; $form-text-margin-top: .25rem; $form-text-font-size: $small-font-size; $form-text-font-style: null; $form-text-font-weight: null; $form-text-color: $text-muted;

$form-file-* are for file input.

$form-file-button-color: $input-color; $form-file-button-bg: var(--#{$prefix}tertiary-bg); $form-file-button-hover-bg: var(--#{$prefix}secondary-bg);

【本文地址】

公司简介

联系我们